<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_复杂数据的处理-computed</title>
  <!-- 
  在 Vue 中， `computed` （计算属性）用于处理复杂的数据逻辑。它允许开发者定义基于已有数据的动态计算属性，这些属性会根据依赖的数据自动更新。
  1. 基本概念
  - 计算属性：计算属性是 Vue 实例的一个属性，它的值是基于其他数据属性计算得出的。
  - 响应式：计算属性会自动依赖于它所使用的数据属性，当这些依赖的数据发生变化时，计算属性的值会自动重新计算。

  2. 基本用法
  计算属性通常在 Vue 组件的  `computed`  选项中定义，基本语法如下：
  <template>
    <div>
      <p>原始值：{{ number }}</p>
      <p>计算值：{{ doubledNumber }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        number: 5,
      };
    },
    computed: {
      doubledNumber() {
        return this.number * 2; // 计算属性
      },
    },
  };
  </script>
  在这个例子中， `doubledNumber`  是一个计算属性，它的值是  `number`  的两倍。

  3. 计算属性的特点

  - 缓存：计算属性的结果会被缓存，只有当其依赖的数据发生变化时，才会重新计算。这使得计算属性在性能上比方法（methods）更优。
  - 只读和可写：计算属性可以是只读的，也可以是可写的。如果需要设置计算属性的值，可以通过定义一个 setter 来实现。

  4. 可写计算属性示例

  以下是一个可写计算属性的示例：
  <template>
    <div>
      <input v-model="fullName" />
      <p>全名：{{ fullName }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        firstName: 'John',
        lastName: 'Doe',
      };
    },
    computed: {
      fullName: {
        get() {
          return `${this.firstName} ${this.lastName}`;
        },
        set(value) {
          const names = value.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
      },
    },
  };
  </script>
  在这个例子中， `fullName`  是一个可写的计算属性，既可以获取全名，也可以通过输入框设置名字。

  5. 使用场景
  - 复杂数据处理：当需要基于多个数据属性进行复杂计算时，计算属性非常有用。
  - 数据格式化：可以用于格式化数据，如日期、货币等。
  - 条件渲染：在模板中使用计算属性来控制显示的内容。

  6. 注意事项
  - 避免副作用：计算属性应尽量保持纯粹，避免在计算过程中引入副作用（如修改其他数据）。
  - 性能优化：在性能敏感的场景中，使用计算属性可以避免不必要的重复计算。

  总结
  -  `computed` ：用于定义基于其他数据属性的动态计算属性。
  - 响应式和缓存：计算属性会自动更新并缓存结果，提高性能。
  - 可读和可写：可以定义只读或可写的计算属性，灵活性高。
  - 应用场景：适用于复杂数据处理、数据格式化和条件渲染等。
  -->
</head>
<body>

  <div id="app">
    <!-- 使用: 插值语法表达式直接进行拼接 -->
    <h3>1. 拼接名字</h3>
    <div>{{ fullName }}</div>
    <div>{{ fullName }}</div>

    <h3>2. 三元运算符</h3>
    <div>{{ scoreLevel }}</div>

    <h3>3. 反转单词显示文本</h3>
    <div>{{ reversMessage }}</div>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, computed } = Vue

    createApp({
      setup() {
        const firstName = ref('John')
        const lastName = ref('Doe')
        const score = ref(70)
        const message = ref("my name is computed")

        // 1.计算属性默认对应的是一个函数
        const fullName = computed(() => {
          return `${firstName.value} ${lastName.value}`
        })

        const scoreLevel = computed({
          get() {
            return score.value >= 60 ? '及格' : '不及格'
          },
          set(value) {
            score.value = value
          }
        })

        const reversMessage = computed(() => {
          return message.value.split(" ").reverse().join(" ")
        })

        return {
          firstName,
          lastName,
          score,
          message,
          fullName,
          scoreLevel,
          reversMessage
        }
      }
    }).mount('#app')

  </script>
  
</body>
</html>